Compartiendo nuestra aplicación

class: center, middle, inverse, title-slide

# Compartiendo nuestra aplicación
## Curso: Introducción al análisis espacial y web-mapping <br>con Google Earth Engine y R Shiny<br>
### MSc. José A. Lastra <br>Matías Olea<br>
### Laboratorio Geo-Información y Percepción Remota
### 18/07/2021

---

background-image: url(data:image/png;base64,#logo_labgrs_color.png)
background-position: center
background-size:40%

---
# Librerías utilizadas en esta sesión

```r
library(shiny)
library(leaflet)
library(rgdal)
library(tidyverse)
library(sf)
library(bslib)
library(raster)
library(plotly)
library(shinythemes)
library(ggfortify)
```

---
# Antes de empezar

--
- Haremos uso de la aplicación raster de Temperatura superficial del mar.

--
- Modificaremos el usho de *shinythemes* por la librería [*bslib*](https://github.com/rstudio/bslib)

--
- Poblaremos nuestro tab secundario con la posibilidad de cargar datos y la de descargar

--
- Desplegaremos esta aplicación en la web.

--
- Descargue el código base y los datos de la aplicación si es que no los tiene disponibles.

--
.center[
![:scale 50%](data:image/png;base64,#https://raw.githubusercontent.com/allisonhorst/stats-illustrations/master/other-stats-artwork/debugging.jpg)]
.center[.footnote[© Allison Horst]]

---

.center[![:scale 80%](data:image/png;base64,#app_raster.png)]

---
# Tab secundaria

--
- Agregando la opción de subir datos.
- Pondremos la función *fileInput()* para habilitar esto en nuestro *sidebarPanel()*

```r
fileInput('target_upload', 'Suba su tabla', accept = c('.csv'))
```

--
- Agregaremos la función *downloadButton()*

```r
downloadButton('descargar','Descargar plot')
```

-- 
- Nuestro segundo tabPanel quedaría así

```r
 tabPanel('Tab secundario',
                          sidebarLayout(sidebarPanel(
                            fileInput('target_upload', 'Suba su tabla', accept = c('.csv')),br(),
                            actionButton('plot',label = 'Plot'),
                            downloadButton('descargar','Descargar plot'),
                            fluid=T,width = 2),
                            mainPanel(plotOutput('decom'))
                          ))
```

---
# Generando la subida en el server

--
- En este ejemplo usaremos series de tiempo en formato **.csv*; si quiséramos otros tipos de archivos hay que realizar la configuración adecuada.

```r
datos <- reactive({
    req(input$target_upload)
    inFile <- input$target_upload
    if (is.null(inFile))
      return(NULL)
    df <- read_csv(inFile$datapath)
    df_subset <- df[,'sst']
    return(df_subset)
  })
```

--
- Crearemos un elemento reactivo que contendrá el gráfico

```r
graf <- eventReactive(input$plot,{
    req(!is.null(datos()))
    ts.serie <- ts(datos(),start=c(1981,244),end=c(2020,117),frequency=365)
    g <- autoplot(ts.serie, ylab = 'SST °C',asp = 0.2)
    g
  })
```

---
#Renderizando el gráfico

```r
observeEvent(input$plot,{
    req(!is.null(datos()))
    output$decom <- renderPlot({
      graf()
    })
  })
```

--
.center[
![:scale 95%](data:image/png;base64,#app3a.png)
]

---
# Configurando al descarga

```r
 ## habilitar descarga
  output$descargar <- downloadHandler(
    #nombre de archivo
    filename = "serie.jpg",
    content = function(file){
      ggsave(file, graf(),dpi = 150,width = 15,height = 10)
    }
  )
```

---
# Añadamos un pequeño proceso en los datos

--
- Para esto añadiremos la función *checkboxInput()*

--
- Nuestro tabPanel queda de la siguiente manera

```r
 tabPanel('Tab secundario',
                          sidebarLayout(sidebarPanel(
                            fileInput('target_upload', 'Suba su tabla',accept = c('.csv')),br(),
                            checkboxInput("desc", label = "Descomponer serie", value = F),br(),
                            actionButton('plot',label = 'Plot'),
                            downloadButton('descargar','Descargar plot'),
                            fluid=T,width = 2),
                            mainPanel(plotOutput('decom'))
                          ))
```

---
#En el server

--
- Cambiaremos el código que crea los gráficos

```r
 graf <- eventReactive(input$plot,{
    req(!is.null(datos()))
    ts.serie <- ts(datos(),start=c(1981,244),end=c(2020,117),frequency=365)
    
    if(input$desc == T){
      g <- decompose(ts.serie) %>% autoplot() 
    }
    if(input$desc == F){
    g <- autoplot(ts.serie, ylab = 'SST °C',asp = 0.2)}
    g
  })
```

---
class: middle, center
![:scale 95%](data:image/png;base64,#app4b.png)
---
# Modificando nuestro tema

--
- En la app inicial usamos la función *shinyTheme('cerulean')* para dar colores y formatos a nuestra aplicación de forma general.

--
- La librería *bslib* nos permite mejorar la personalización de nuestras app empleando bootstrap 4.

--
- En nuestro argumento *theme =* reemplazaremos shinyTheme() por lo siguiente:

```r
theme = bs_theme(version = 4, bg = "#040404", 
                 fg = "#FFF1F1", font_scale = 0.8, 
                 bootswatch = "litera")
```

--
- Podemos ver y personalizar aún más nuestro tema empleando `bslib::bs_theme_preview()`.

---
class: middle, center
![:scale 95%](data:image/png;base64,#app_mod.png)

---
# Compartiendo nuestros desarrollos web

--
- El desarrollo de cualquier aplicación de análisis, ya sea de datos o geo-datos, puede tener una utilidad significativa en algún área o proceso de toma de decisiones.

--
- Es por esto que luego de desarrollarla, debemos pensar en como masificar su uso y difusión.

--
- Existen variadas formas de compartir nuestros recursos en la web o de forma local con otros usuarios y usuarias.

--
- A continuación veremos algunos ejemplos de compartir en nuestras aplicaciones.

---
# Métodos locales

--
- Compartir el script y los datos: Esta es la forma más convencional de compartir una app y simplemente consiste en compartir los archivos que hacen funcionar nuestra aplicación para que los usuarios la puedan correr localmente.

--
- Compartir URL: otra forma es zippear la aplicación y alojarla en algún sitio (GoogleDrive, Dropbox u otro) y compartir la url para que los usuarios puedan acceder al archivo de la siguiente manera:

```r
runUrl("<url al zip>")
```

---
#Github

--
De manera complementaria uno puede alojar sus aplicaciones en GitHub o en Gist y puede dar acceso a las mismas considerando el nombre de repositorio y la app para que los usuarios puedan acceder.

```r
runGitHub( "oceDataApp", "JoseLastra")
```

---
class: middle, center

![:scale 95%](data:image/png;base64,#app22.png)
---
#En la web

Una forma de compartir es simplemente alojar nuestra aplicación en un servicio y poder ponerla a disposición en un servidor externo o propio.Existen varias opciones donde las más comunes son el uso de:

--
- [Shinyapps.io](https://www.shinyapps.io/): Una de las formas más fáciles de subir trabajando directamente desde RStudio.

--
- [Shiny Server](https://rstudio.com/products/shiny/shiny-server/): Es un programa complementario que permite configurar un servidor para el alojamiento y despliegue de aplicaciones. Necesitará un servidor Linux con Ubuntu 12.04 o superior (64 bits) y CentOS / RHEL 5 (64 bits) para poder operar Shiny Server.

--
- [RStudio Connect](https://rstudio.com/products/connect/): es una plataforma de publicación para el trabajo que crean sus equipos en R y Python. Contempla no solo shiny apps sino que también otros productos (informes de R Markdown, Plumber APIs, dashboards, Jupyter Notebooks, contenido interactivo de Python).

---
#Desplegando en Shinyapps.io

--
- Antes de comenzar es importante disponer de una cuenta gratuita en [Shinyapps.io](https://www.shinyapps.io/)

--
- Con nuestra cuenta activa, debemos instalar la librería rsconnect que nos permitirá subir nuestras aplicaciones directamente desde RStudio.

```r
install.packages('rsconnect')
```

--
- Una vez instalada, la cargaremos en nuestro entorno mediante la función `library(rsconnect)`.

--
- Ahora, iremos a nuestra cuenta de shinyapps.io y en nuestro perfil debemos ubicar la opción Tokens donde encontraremos una ventana con varios códigos para nuestra cuenta.

---
class: middle, center
![:scale 95%](data:image/png;base64,#app33.png)
---

-
Aquí, oprimiremos la opción *Show secret* para que nos muestre los valores necesarios y los copiaremos en nuestro portapapeles.

--
.center[
![:scale 90%](data:image/png;base64,#app4.png)
]

--
- Para conectar nuestra cuenta, abriremos primero nuestra aplicación de sitios turísticos la desplegaremos (Run App) y buscaremos el botón de publicación.

.center[
![:scale 90%](data:image/png;base64,#app6.png)
]

---

--
- Si disponemos de una cuenta ya conectada, por defecto nos dará la opción de publicarla en esa cuenta pero sino hemos vinculado nada debemos proceder a conectarla usando la información que pegamos desde los *Tokens*.

--
.center[
![:scale 50%](data:image/png;base64,#app7.png)
]

---
.center[
![:scale 50%](data:image/png;base64,#app9.png)
]

--
- Con la cuenta conectada, debemos seleccionar los archivos a montar sobre nuestro sitio, el título de la aplicación y ver la cuenta de conexión (en caso de disponer de varias).

---
class: middle, center
![:scale 50%](data:image/png;base64,#app10.png)

---
class: middle, center
![:scale 95%](data:image/png;base64,#app11.png)
---
# Nota adicional

--
- Estas son los ejemplos más comunes de despliegue

--
- También se pueden montar shiny apps completamente funcionales, empleando otros servicios web como mediante máquinas virtuales en Google, AWS (Amazon Web Services), Digital Ocean u otros similares.

--
- La decisión de una u otra depende exclusivamente de la escalabilidad, volumen de datos, tráfico y capacidad analítica requerida para un correcto funcionamiento.

---
background-image: url(data:image/png;base64,#logo_labgrs_color.png)
background-position: center
background-size:40%